<template>
    <div class="collect-page">
        <div class="collect-title">
            {{ $t('message.buttons.collect') }}
        </div>
        <div class="list-item list-header">
            <div class="item-name">
                {{ $t('message.index.fileName') }}
                <svg class="sort-icon" @click="changeSort('name')">
                    <use
                        v-bind:xlink:href="`#${nameSort == 'desc' ? 'keowledge-a-paixu-jiangxu1' : 'keowledge-paixu-shengxu'}`">
                    </use>
                </svg>
            </div>
            <div class="item-author">
                {{ $t('message.text.ascription') }}
            </div>
            <div class="item-time">
                {{ $t('message.text.modifiTime') }}
                <svg class="sort-icon" @click="changeSort('updateTime')">
                    <use
                        v-bind:xlink:href="`#${timeSort == 'desc' ? 'keowledge-a-paixu-jiangxu1' : 'keowledge-paixu-shengxu'}`">
                    </use>
                </svg>
            </div>
            <div class="item-action"></div>
        </div>
        <div class="list-items-box" v-loading="collectLoading">
            <el-scrollbar v-if="collectList.length != 0">
                <div v-for="(item, index) in collectList" :key="index" class="list-item">
                    <div class="item-name" v-tooltip-auto-show @click="jumpDocFile(item)">
                        <svg class="file-icon">
                            <use v-bind:xlink:href="getIcon(item.type, item.nameSuffix)"></use>
                        </svg>
                        <el-tooltip :content="item.name" effect="light">
                            <span>{{ item.name }}</span>
                        </el-tooltip>
                    </div>
                    <div class="item-author" v-tooltip-auto-show>
                        <el-tooltip :content="item.createBy" effect="light">
                            <span>{{ item.createBy }}</span>
                        </el-tooltip>
                    </div>
                    <div class="item-time" v-tooltip-auto-show>
                        <el-tooltip :content="item.updateTime" effect="light">
                            <span>{{ item.updateTime }}</span>
                        </el-tooltip>
                    </div>
                    <div class="item-action">
                        <svg class="collect" @click="cancalCollect(item, index)">
                            <use xlink:href="#keowledge-mobile-shoucang-xuanzhong-2"></use>
                        </svg>
                    </div>
                    <div class="bottom-line"></div>
                </div>
            </el-scrollbar>
            <jvs-empty v-if="collectList.length == 0"></jvs-empty>
        </div>
    </div>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    toRefs,
    watch,
    onMounted,
    getCurrentInstance
} from 'vue'

import { useRouter } from "vue-router"
const router = useRouter();
import { knowledgesCollect } from '@/api/knowledge'
import { docStar } from "@/api/common";
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
const emit = defineEmits([""])
const { proxy } = getCurrentInstance()
const nameSort = ref('desc')
const timeSort = ref('desc')
const collectList = ref([])
const collectLoading = ref(false)
onMounted(() => {
    init()
})
function init() {
    collectLoading.value = true
    knowledgesCollect({
        size: 100,
        current: 1,
    }).then(res => {
        if (res.data.code == 0) {
            collectLoading.value = false
            collectList.value = res.data.data.records
            listSort('updateTime', timeSort.value)
        }
    }).catch(err => {
        collectLoading.value = false
    })
}
function changeSort(prop) {
    let sort = ''
    if (prop == 'name') {
        nameSort.value = nameSort.value == 'desc' ? 'asc' : 'desc'
        sort = nameSort.value
    } else if (prop = 'updateTime') {
        timeSort.value = timeSort.value == 'desc' ? 'asc' : 'desc'
        sort = timeSort.value
    }
    listSort(prop, sort)
}
function listSort(prop, sort) {
    collectList.value.sort((a, b) => {
        if (sort == 'desc') {
            if (a[prop] > b[prop]) {
                return -1
            } else {
                return 1
            }
        } else {
            if (a[prop] < b[prop]) {
                return -1
            } else {
                return 1
            }
        }
    })
}
function cancalCollect(item, index) {
    docStar(item.id).then(res => {
        if (res.data && res.data.code == 0) {
            collectList.value.splice(index, 1)
            proxy.$notify({
                title: $t('message.buttons.unCollect'),
                message: $t('message.message.actionSuccess'),
                type: 'success',
                position: 'bottom-right'
            })
        }
    })
}
function jumpDocFile(item) {
    router.push({
        path: `/knowledge/all/${item.knowledgeId}`,
        query: {
            docId: item.id
        }
    })
}
</script>
<style lang="scss" scoped>
.collect-page {
    height: 100%;
    width: 100%;
    position: relative;

    .collect-title {
        padding: 0px 24px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        font-size: 20px;
        color: #363b4c;
        @include SourceHanSansCN-Bold;
    }

    .list-item {
        display: flex;
        align-items: center;
        height: 52px;

        .sort-icon {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }

        .item-name {
            min-width: 80px;
            width: calc(100% - 524px);
            display: flex;
            align-items: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: 8px;
            padding-left: 8px;
            box-sizing: border-box;
            cursor: pointer;

            span {
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .item-author {
            min-width: 80px;
            font-size: 12px;
            color: #6F7588;
            width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: 8px;
            box-sizing: border-box;

            span {
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .item-time {
            min-width: 80px;
            width: 240px;
            display: flex;
            align-items: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: 8px;
            box-sizing: border-box;

            span {
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .item-action {
            min-width: 60px;
            width: 60px;
            display: flex;
            align-items: center;
        }
    }

    .list-header {
        height: 32px;
        margin: 0px 24px;
        font-size: 12px;
        color: #363B4C;
        @include SourceHanSansCN-Regular;
        border-bottom: 1px solid #eeeff0;
        user-select: none !important;

        .item-time {
            color: #363B4C;
        }

        .item-author {
            color: #363B4C;
        }
    }

    .list-items-box {
        height: calc(100% - 78px);
        margin-bottom: 16px;

        .list-item {
            padding: 0px 24px;
            position: relative;

            &:hover {
                background: #F5F6F7;
            }

            .bottom-line {
                width: 1118px;
                height: 1px;
                background: #EEEFF0;
                position: absolute;
                left: 58px;
                width: calc(100% - 82px);
                bottom: 0px;
            }

            .item-name {
                font-size: 14px;

                .file-icon {
                    width: 20px;
                    min-width: 20px;
                    height: 20px;
                    margin-right: 16px;
                }
            }

            .item-time {
                font-size: 12px;
                color: #6F7588;
            }

            .item-action {
                .collect {
                    width: 20px;
                    height: 20px;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>